<template>
<div class="hotGoods">
<h3>人气推荐</h3>
<div v-for='item in hotGoodsArr' :key='item.id' class="hotGoodsbox">
     <div class="imgbox"> <img :src="item.list_pic_url" alt=""></div>
     <div class="text">
         <p class="p1">{{item.name}}</p>
         <p class="p2">{{item.goods_brief}}</p>
         <p class="p3">{{item.retail_price | formatMoney}}</p>
     </div>
</div>
</div>
</template>
<script>
export default {
name: 'HotGoods',
props:['hotGoodsArr'],
data() {
return {}
},
components: {
},
methods: {
},
created() {},
mounted() {},
updated() {},
};
</script>
<style scoped lang='less'>
.hotGoods{
    box-sizing: border-box;
    // display: flex;
    background-color: #fff;
    padding-top: 30px;
    h3{
        text-align: center;
    background-color: white;
    height: 40px;
    line-height: 40px;
    font-size: 18px;
    color: #000000;
    padding-bottom: 10px;
    font-weight:900;
    }
    .hotGoodsbox{
         
        box-sizing: border-box;
    padding: 8px 16px;
    color: #323233;
    font-size: 12px;
    background-color: #fafafa;
    height: 104px;
    margin-bottom: 10px;
    }
    .imgbox{
            display: flex;
            margin-right: 10px;
           float: left;
           width: 88px;
           height: 88px;
    }
    .text{
        .p1{
            font-size: 18px;
            font-weight:600;
        }
        .p2{
            font-size: 12px;
            line-height: 40px;
        }
        .p3{
            font-size: 12px;
             color: #d8322d;
        }
    }
}
</style>